<template>
   <common-card title="今日销售额" :value="salesToday | numberFormat" class="today-users">
     <template>
       <div class="compare-wrap">
         <div class="compare">
           <div>同日比</div>
           <div class="emphasis">{{salesLastDay}}</div>
           <div :class="salesLastDay > 0 ? 'increment' : 'decrement'"></div>
         </div>
         <div class="compare">
           <div>月同比</div>
           <div class="emphasis">{{salesGrowthLastDay}}</div>
           <div :class="salesGrowthLastDay > 0 ? 'increment' : 'decrement'"></div>
         </div>
       </div>
     </template>
     <!-- <template v-slot:total> -->
     <template #total>
       <span>昨日销售额</span>
       <span class="emphasis">$ {{salesGrowthLastMonth}}</span>
     </template>
   </common-card>
</template>

<script>
import {mapState} from "vuex"
export default {
name:"TodaySales",
    // "//1": "今日销售额",
    // "salesToday": 30346799,
    // "salesLastDay":   36000000,
    // "salesGrowthLastDay": -19.16,
    // "salesGrowthLastMonth": 56.67,
computed:{
  ...mapState({
    salesToday:state=>state.data.reportData.salesToday,
    salesLastDay:state=>state.data.reportData.salesLastDay,
    salesGrowthLastDay:state=>state.data.reportData.salesGrowthLastDay,
    salesGrowthLastMonth:state=>state.data.reportData.salesGrowthLastMonth,
  })
}
}
</script>

<style lang="scss" scoped>
.today-users {
  .compare-wrap {
    height:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .compare {
      display: flex;
      font-size: 12px;
      margin: 5px;
    }
  }

}
</style>